an app to share curated trails
sidetrail.app
1.DraftEditor {
2 min-height: 100vh;
3 padding: 1rem;
4 position: relative;
5 isolation: isolate;
6}
7
8.DraftEditor::before {
9 content: "";
10 position: fixed;
11 inset: 0;
12 background: var(--bg-color, #fff);
13 filter: var(--user-content-filter);
14 z-index: -1;
15 pointer-events: none;
16}
17
18.DraftEditor-container {
19 max-width: 42rem;
20 margin: 0 auto;
21 padding-top: 2rem;
22}
23
24.DraftEditor-notFound {
25 max-width: 32rem;
26 margin: 4rem auto;
27 text-align: center;
28 padding: 2rem;
29}
30
31.DraftEditor-notFound h1 {
32 font-size: 1.5rem;
33 margin-bottom: 0.5rem;
34 color: var(--accent-color, #000);
35 filter: var(--user-content-filter);
36}
37
38.DraftEditor-notFound p {
39 color: var(--text-secondary);
40}
41
42.DraftEditor-header {
43 margin-bottom: 2rem;
44}
45
46.DraftEditor-titleInput {
47 width: 100%;
48 font-size: 2rem;
49 font-weight: 600;
50 border: none;
51 background: transparent;
52 padding: 0.5rem 0;
53 margin-bottom: 1rem;
54 color: var(--accent-color, #000);
55 font-family: inherit;
56 filter: var(--user-content-filter);
57}
58
59.DraftEditor-titleInput:focus {
60 outline: none;
61 border-bottom: 2px solid var(--accent-color, #000);
62}
63
64.DraftEditor-titleInput::placeholder {
65 color: var(--text-primary);
66 opacity: 0.3;
67}
68
69.DraftEditor-descriptionInput {
70 width: 100%;
71 font-size: 1rem;
72 line-height: 1.5;
73 border: none;
74 background: transparent;
75 padding: 0.5rem 0;
76 color: var(--text-secondary);
77 font-family: inherit;
78 resize: vertical;
79}
80
81.DraftEditor-descriptionInput:focus {
82 outline: none;
83 border-bottom: 2px solid var(--accent-color, #000);
84}
85
86.DraftEditor-descriptionInput::placeholder {
87 color: var(--text-secondary);
88 opacity: 0.3;
89}
90
91.DraftEditor-stops {
92 margin-bottom: 2rem;
93}
94
95.DraftEditor-stopsTitle {
96 font-size: 1.25rem;
97 font-weight: 600;
98 margin-bottom: 1rem;
99 color: var(--accent-color, #000);
100 filter: var(--user-content-filter);
101}
102
103.DraftEditor-emptyStops {
104 color: var(--text-muted);
105 font-style: italic;
106 padding: 2rem;
107 text-align: center;
108 background: rgba(0, 0, 0, 0.02);
109 border-radius: 8px;
110}
111
112.DraftEditor-stopsList {
113 display: flex;
114 flex-direction: column;
115 gap: 1rem;
116}
117
118.DraftEditor-stop {
119 display: flex;
120 gap: 1rem;
121 padding: 1rem;
122 background: rgba(0, 0, 0, 0.02);
123 border-radius: 8px;
124 border-left: 3px solid var(--accent-color, #000);
125 position: relative;
126 isolation: isolate;
127}
128
129.DraftEditor-stop::before {
130 content: "";
131 position: absolute;
132 left: 0;
133 top: 0;
134 bottom: 0;
135 width: 3px;
136 filter: var(--user-content-filter);
137}
138
139.DraftEditor-stopNumber {
140 flex-shrink: 0;
141 width: 2rem;
142 height: 2rem;
143 display: flex;
144 align-items: center;
145 justify-content: center;
146 background: var(--accent-color, #000);
147 color: white;
148 border-radius: 50%;
149 font-weight: 600;
150 font-size: 0.875rem;
151 filter: var(--user-content-filter);
152}
153
154.DraftEditor-stopContent {
155 flex: 1;
156}
157
158.DraftEditor-stopContent h3 {
159 font-size: 1rem;
160 font-weight: 600;
161 margin-bottom: 0.25rem;
162 color: var(--accent-color, #000);
163 filter: var(--user-content-filter);
164}
165
166.DraftEditor-stopContent p {
167 font-size: 0.875rem;
168 color: var(--text-secondary);
169 line-height: 1.5;
170}
171
172.DraftEditor-actions {
173 padding-top: 2rem;
174 border-top: 1px solid #eee;
175 display: flex;
176 justify-content: flex-end;
177}
178
179.DraftEditor-deleteButton {
180 padding: 0.75rem 1.5rem;
181 background: transparent;
182 border: 1px solid #e74c3c;
183 color: #e74c3c;
184 border-radius: 4px;
185 font-size: 0.875rem;
186 cursor: pointer;
187 transition: all 0.2s;
188}
189
190.DraftEditor-deleteButton:hover {
191 background: #e74c3c;
192 color: white;
193}
194
195/* Blocked state when multiple tabs */
196.DraftEditor-content {
197 transition: filter 0.3s ease;
198}
199
200.DraftEditor-content.is-blocked {
201 filter: blur(4px);
202 pointer-events: none;
203}
204
205.DraftEditor-blockedOverlay {
206 position: fixed;
207 top: 0;
208 left: 0;
209 right: 0;
210 bottom: 0;
211 background: rgba(0, 0, 0, 0.3);
212 z-index: 999;
213}
214
215@media (prefers-color-scheme: dark) {
216 .DraftEditor-blockedOverlay {
217 background: rgba(0, 0, 0, 0.5);
218 }
219}
220
221.DraftEditor-blockedMessage {
222 position: fixed;
223 top: 50%;
224 left: 50%;
225 transform: translate(-50%, -50%);
226 background: var(--bg-primary);
227 padding: 2rem 2.5rem;
228 border-radius: 16px;
229 border: 1px solid var(--border-subtle);
230 box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
231 max-width: 400px;
232 width: calc(100% - 2rem);
233 z-index: 1000;
234 text-align: center;
235}
236
237@media (prefers-color-scheme: dark) {
238 .DraftEditor-blockedMessage {
239 box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
240 }
241}
242
243.DraftEditor-blockedMessage p:first-child {
244 font-size: 1.125rem;
245 font-weight: 500;
246 color: var(--text-primary);
247 text-transform: lowercase;
248 margin: 0 0 0.5rem;
249}
250
251.DraftEditor-blockedMessage p:last-child {
252 font-size: 0.875rem;
253 color: var(--text-muted);
254 text-transform: lowercase;
255 margin: 0;
256}
257
258/* Conflict banner */
259.DraftEditor-conflict {
260 position: fixed;
261 top: 1rem;
262 left: 50%;
263 transform: translateX(-50%);
264 background: #f39c12;
265 color: white;
266 padding: 1rem 1.5rem;
267 border-radius: 8px;
268 text-align: center;
269 z-index: 1000;
270}
271
272.DraftEditor-conflict p {
273 margin: 0 0 0.75rem;
274 font-size: 0.875rem;
275}
276
277.DraftEditor-conflictActions {
278 display: flex;
279 gap: 0.75rem;
280 justify-content: center;
281}
282
283.DraftEditor-conflictActions button {
284 padding: 0.5rem 1rem;
285 border: 1px solid white;
286 background: transparent;
287 color: white;
288 border-radius: 4px;
289 font-size: 0.875rem;
290 cursor: pointer;
291}
292
293.DraftEditor-conflictActions button:hover {
294 background: rgba(255, 255, 255, 0.2);
295}